<template>
  <div id="square_from">
    <header class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #c5c5c5">
      <a class="mui-icon  mui-pull-left arr_left" @tap="close_add_square_view">
      </a>
      <h1 class="mui-title">发表图文</h1>
      <a class="mui-pull-right"  @tap="submit_square_from">发表</a>
    </header>

    <div class="mui-content">

      <div class="address_form">
        <div class="text_info">
          <textarea class="fs_28" v-model="content" placeholder="这一刻的想法..."></textarea>
        </div>
        <div class="hr_20"></div>
        <div class="imgs fbwz">

          <div id="has_img">

            <div class="img_item" v-for="(i,k) in $store.state.home_status.upload_square_imgs" :key="k">
              <div class="has_img"><img :src="i"/></div>
              <i class="mui-icon mui-icon-closeempty" @tap="del_upload_img(k)"></i>
            </div>

          </div>
          <div class="img_item add_img" v-show="$store.state.home_status.upload_square_imgs.length<3" @tap="open_upload_img_view">
            <i class="iconfont icon-paizhao"></i>
            <div class="fs_20">最多三张</div>
          </div>
        </div>



      </div>
    </div>

  </div>
</template>

<script>
  import HomeFooter from '../../components/HomeFooter'

  import UploadImg from '../../components/UploadImg'
  import home_ajax from "../../ajax/home_ajax";
  export default {
    name: 'square_from',
    data() {
      return {
        content:''
      };
    },
    methods: {
      close_add_square_view() {
        this.$store.commit('open_add_square_view', false)
      },
      open_upload_img_view(){
        console.log(11)
        this.$store.commit('open_upload_img_view', "show")
      },
      submit_square_from(){
        if(!this.content){
          mui.toast("请填写内容")
          return
        }
        let pics = "";
        let imgs = this.$store.state.home_status.upload_square_imgs;
        for(let i=0;i<imgs.length;i++){
          pics += imgs[i]+","
        };
        pics = pics.slice(0,pics.length-1);
        console.log("asdasdasd")
        console.log(JSON.stringify(this.content).replace(/\\n/g,"<br>").replace(/\s/g,"&nbsp;").replace(/"/g,""))

        home_ajax.post_square_content({
          sqid:this.$store.state.account.community.sqid,
          uid:this.$store.state.account.user_info.uid,
          pics:pics,
          content:JSON.stringify(this.content).replace(/\\n/g,"<br>").replace(/\s/g,"&nbsp;").replace(/"/g,"")
        },res=>{
          if(res){
            mui.toast("发布成功，等待审核");
            this.$store.commit('open_add_square_view', false)
          }
        })

      },
      del_upload_img(k){
        // commit 会默认提交两次
        // 生成时间戳，和随机数  用于判断是否是同一次提交
        let d  = new Date();
        let random = parseInt(Math.random()*1000000);
        let times = d.getTime();
        console.log(times+""+random);
        this.$store.commit("del_upload_img",{
          sign:times+""+random,
          type:'square',
          k:k
        })
      }
    },
    created(){
      /*
         上传图片的类型 upload_img_type
       *     square-->社区广场 上传图片
       *     user-->用户头像 上传图片
       *     goods-->商品评论 上传图片
       *
       * */
      this.$store.commit("change_upload_img_type","square")
    },
    mounted() {
      let that = this;

    },
    components: {
      HomeFooter,
      UploadImg
    }
  }
</script>
<style lang="less" scoped>
  @import "../../../static/pxvalue.less";
  #square_from{
    height: 100%;
  }
  html,
  body,
  .mui-content {
    background-color: #ffffff;
    font-family: "微软雅黑";
  }

  .mui-action-back {
    height: 44px;
    width: 44px;
  }

  .mui-action-back img {
    width: 100%;
  }

  .mui-content {
    padding-bottom: 50px;
    padding-top: 44px !important;
  }

  .arr_left {
    background-image: url(../../assets/images/ptsp/left_arr_03.png);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
  }

  .mui-title {
    font-size: 0.768rem;
  }

  .mui-bar-nav a {
    font-size: 0.5973rem;
    color: #888888;
    line-height: 44px;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  ul,
  li,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  b,
  i {
    margin: 0;
    padding: 0;
    font-weight: normal;
    list-style: none;
  }

  .hr_10 {
    width: 100%;
    height: 0.2133rem;
    background-color: #f6f6f6;
  }

  .hr_15 {
    width: 100%;
    background-color: #f6f6f6;
    height: 0.32rem;
  }

  .hr_20 {
    width: 100%;
    background-color: #f6f6f6;
    height: 0.4267rem;
  }

  .hr_25 {
    background-color: #f6f6f6;
    width: 100%;
    height: 0.5333rem;
  }

  .show_text_1_line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .show_text_2_line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .show_text_3_line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .bg_liner {
    background: linear-gradient(to right, #1cb5fc, #1c83fc);
  }

  .fs_20 {
    font-size: 0.4267rem;
  }

  .fs_22 {
    font-size: 0.4693rem;
  }

  .fs_24 {
    font-size: 0.512rem;
  }

  .fs_26 {
    font-size: 0.5547rem;
  }

  .fs_28 {
    font-size: 0.5973rem;
  }

  .fs_30 {
    font-size: 0.64rem;
  }

  .fs_32 {
    font-size: 0.6827rem;
  }

  .fs_34 {
    font-size: 0.7253rem;
  }

  .fs_36 {
    font-size: 0.768rem;
  }

  html,
  body,
  .mui-content {
    height: 100%;
  }

  .mui-content {
    background-color: #f6f6f6;
  }

  .address_form {
    background-color: #FFFFFF;
  }

  .address_form .text_row_100 {
    padding: 0 0.64rem;
    height: 2.1333rem;
    line-height: 2.1333rem;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
  }

  .address_form .text_row_100 .input {
    margin: 0;
    padding: 0;
    border: none;
    width: 10.4533rem;
    height: 2.1333rem;
    line-height: 2.1333rem;
    padding-left: 0.2133rem;
  }

  .address_form .text_row_100 .icon {
    height: 2.1333rem;
    line-height: 2.1333rem;
  }

  .address_form .text_row_100 .icon-qr {
    height: 2.1333rem;
    line-height: 2.1333rem;
    font-size: 1.0667rem;
    color: #1c83fc;
  }

  .address_form .text_row_100:last-child {
    border-bottom: none;
  }

  .imgs {
    padding: 0 0.64rem;
    overflow: hidden;
  }

  .imgs .img_item {
    position: relative;
    float: left;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid #e5e5e5;
    margin-left: 0.3413rem;
    margin-bottom: 0.3413rem;
  }

  .imgs .img_item .has_img {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .imgs .img_item .has_img img {
    width: 100%;
  }

  .imgs .img_item .mui-icon-closeempty {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 18px;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border-radius: 50%;
  }

  .imgs .add_img {
    padding-top: 0.64rem;
    text-align: center;
  }

  .imgs .add_img i {
    font-size: 1.28rem;
  }

  .imgs .add_img .fs_20 {
    color: #888888;
  }

  .text_row_80 {
    height: 1.7067rem;
    line-height: 1.7067rem;
  }

  .text_info {
    padding: 0.64rem;
  }

  .text_info textarea {
    border: none;
  }

  .fbwz {
    padding-top: 0.4267rem;
  }

  .sqwtfk .feedback_top {
    padding: 0.64rem;
  }

  .sqwtfk .feedback_top .feedback_tx {
    width: 1.7067rem;
    height: 1.7067rem;
    float: left;
  }

  .sqwtfk .feedback_top .star_box {
    float: left;
    color: #B5B5B5;
    font-size: 0.768rem;
    height: 1.7067rem;
    line-height: 1.7067rem;
  }

  .sqwtfk .feedback_top .star_box .mui-icon {
    font-size: 0.9387rem;
  }

  .sqwtfk .feedback_top .star_box .mui-icon-star-filled {
    color: #FFB400;
  }

</style>
